<template>
  <div class="basicWrapper">
    <el-row :gutter="20">
      <el-col :span="12">
        <h2 class="formH2">修改手机号</h2>
        <span @click="handleBack()" class="handleBack">返回基本信息</span>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" v-loading="loading">
          <el-form-item label="当前手机号" prop="oldPhone">
            <el-input disabled v-model="form.oldPhone"></el-input>
          </el-form-item>
          <el-form-item label="新手机号" prop="phone">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="phoneCode">
            <div class="phoneLeft">
              <el-input v-model="form.phoneCode" placeholder="请输入验证码"></el-input>
            </div>
            <div class="phoneRight">
              <el-button :disabled="disabled2" @click="logInCode2" class="codeBtn" type="primary" plain>{{
                btnTxt2
              }}</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submitForm()">立即修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { sendPhoneUpdate } from "@/request/api/login"
import { getUserInfo2, changePhone, changePhones } from "@/request/api/user";
import rulesUtil from "@/utils/rules";
export default {
  data() {
    return {
      form: {
        oldPhone: "", //旧手机号号
        phone: "", //手机号
      },
      rules: {
        phone: [
          {
            required: true,
            validator: rulesUtil.FormValidate.Form().validatePhone,
            trigger: "blur",
          },
        ],
        phoneCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      },
      btnTxt2: "获取验证码",
      disabled2: false,
      time2: 60,
      loading: true,
    };
  },
  created() {
    this.getInfo();

  },
  methods: {
    // 获取用户信息
    getInfo() {
      getUserInfo2().then((res) => {
        if (res.data.code === 200) {
          this.loading = false;
          this.form.oldPhone = res.data.result.phone;
        }
        this.loading = false;
      });
    },
    // 返回
    handleBack() {
      this.$emit("handleBacke");
    },
    submitForm() {

      this.$refs.form.validate((valid) => {
        if (valid) {
          var forms = {
            phoneCode: this.form.phoneCode,
            phone: this.form.phone
          }
          changePhones(forms).then((res) => {
            if (res.data.code === 200) {
              if (res.data.result == 2) {
                delete this.form.oldPhone;
                changePhone(this.form).then((res) => {
                  if (res.data.code == 200) {
                    this.$message({
                      message: "修改手机号成功！",
                      type: "success",
                    });
                    this.$store.dispatch('user/getInfo', '')
                    setTimeout(() => {
                      this.$emit("handleBacke");
                    }, 1200);
                  } else {
                    this.$message.error(res.data.message);
                  }
                });
              } else if (res.data.result == 1) {
                this.$message.error('该手机号已被使用!');
              } else if (res.data.result == 0) {
                this.$confirm("该操作将清除原有微信用户的操作记录，是否继续？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }).then(() => {
                  delete this.form.oldPhone;
                  changePhone(this.form).then((res) => {
                    if (res.data.code == 200) {
                      this.$message({
                        message: "修改手机号成功！",
                        type: "success",
                      });
                      setTimeout(() => {
                        this.$emit("handleBacke");
                      }, 1200);
                    } else {
                      this.$message.error(res.data.message);
                    }
                  });
                })
              }
            }

          });


        } else {
          return false;
        }
      });

    },
    // 点击获取验证码-手机号
    logInCode2() {
      if (this.form.phone === "") {
        this.$message({
          message: "请输入手机号！ ",
          type: "warning",
        });
        return false;
      }
      this.getSendPhone(this.form.phone);
    },
    //发送手机验证码倒计时-手机号
    timer2() {
      if (this.time2 > 0) {
        this.disabled2 = true;
        this.time2--;
        this.btnTxt2 = this.time2 + "秒";
        setTimeout(this.timer2, 1000);
      } else {
        this.time2 = 0;
        this.btnTxt2 = "获取验证码";
        this.disabled2 = false;
      }
    },
    // 发送手机验证码-手机号
    getSendPhone(phone) {
      let params = {
        phone,
      };
      sendPhoneUpdate(params).then((res) => {
        if (res.data.code === 200) {
          this.$notify({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          this.time2 = 60;
          this.timer2();
        } else {
          this.$notify({
            title: "错误",
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./basicInfo.less";

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.uploadTip {
  color: #666;
  font-size: 14px;
  margin-top: 20px;
}

.uploadTitle {
  font-size: 16px;
  color: #606266;
}

.formRight {
  text-align: center;
  padding-top: 100px;
}

.demo-ruleForm {
  margin-top: 20px;
}

.phoneLeft {
  width: 73%;
  display: inline-block;
  vertical-align: middle;
}

.phoneRight {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
}
</style>

